<template>
  <a-row :gutter="10">
    <a-col :md="leftColMd" :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="6" :sm="8">
                <a-form-item label="角色名称">
                  <a-input v-model="queryParam.name" placeholder=""/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <span
                  class="table-page-search-submitButtons">
                  <a-button type="primary" @click="$refs.table.refresh(true)" icon="search">查询</a-button>
                  <a-button
                    style="margin-left: 8px"
                    icon="reload"
                    @click="() => {this.$objToReset(queryParam),$refs.table.refresh(true)}">重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div class="table-operator">
          <a-button
            type="primary"
            icon="plus"
            @click="$refs.modalEdit.add()"
            v-wx-role="50403">新建
          </a-button>
        </div>
        <s-table
          ref="table"
          size="default"
          rowKey="id"
          :columns="columns"
          :data="loadData"
          :alert="options.alert"
          :rowSelection="options.rowSelection"
          showPagination="auto"
        >
          <template slot="action" slot-scope="text,record">
            <a @click="handleCompanyList(record)" v-wx-role="50407">用户</a>
            <a-divider type="vertical"/>
            <a @click="handlePerssion(record.id)" v-wx-role="50409">授权</a>
            <a-divider type="vertical"/>
            <a-dropdown>
              <a class="ant-dropdown-link">
                更多
                <a-icon type="down"/>
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a @click="handleRoleEdit(record)" v-wx-role="50404">编辑</a>
                </a-menu-item>
                <a-menu-item>
                  <a-popconfirm title="确定删除吗?" @confirm="() => handleRoleDelete(record.id)" v-wx-role="50408">
                    <a>删除</a>
                  </a-popconfirm>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </s-table>

        <template>
          <!-- 右侧的角色权限配置 -->
          <user-role-modal ref="modalUserRole"></user-role-modal>
          <role-edit ref="modalEdit" @ok="modalEditOk"></role-edit>
        </template>
      </a-card>
    </a-col>
    <a-col :md="rightColMd" :sm="24" v-if="this.rightcolval == 1">
      <a-card :bordered="false">
        <div style="text-align: right;">
          <a-icon type="close-circle" @click="hideUserList"/>
        </div>
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="8" :sm="24">
                <a-form-item label="登录账号">
                  <a-input v-model="queryParamCompany.login" placeholder=""/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="用户名称">
                  <a-input v-model="queryParamCompany.companyName" placeholder=""/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <span
                  class="table-page-search-submitButtons">
                  <a-button type="primary" @click="$refs.table2.refresh(true)" icon="search">查询</a-button>
                  <a-button
                    style="margin-left: 8px"
                    icon="reload"
                    @click="() => {queryParamCompany = {},this.$refs.table2.refresh(true)}">重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <s-table
          ref="table2"
          size="default"
          rowKey="companyId"
          :columns="columns2"
          :data="loadData2"
          :alert="options.alert2"
          :rowSelection="options.rowSelection2"
          showPagination="auto"
        >
          <template slot="action" slot-scope="text,record">
            <template>
              <a @click="handleCompanyEdit(record)" v-wx-role="50303">编辑</a>
              <a-divider type="vertical"/>
              <a-popconfirm title="确定删除吗?" @confirm="() => handleCompanyDelete(record.companyId)" v-wx-role="50411">
                <a>删除</a>
              </a-popconfirm>
            </template>
          </template>
        </s-table>
        <div class="table-operator">
          <a-button
            type="primary"
            icon="plus"
            @click="addCompany"
            v-wx-role="50301">新建用户
          </a-button>
          <a-button type="primary" icon="plus" @click="handleAddUserRole">已有用户</a-button>
          <a-dropdown v-if="selectedRowKeys2.length > 0">
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleCompanyDelete()">
                  <a>
                    <a-icon type="delete"/>
                    删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px"> 批量操作
              <a-icon type="down"/>
            </a-button>
          </a-dropdown>
        </div>
        <user-modal ref="companyFormModal" @ok="companyFormModalOk"></user-modal>
        <wx-select-company-component ref="selectUserModal" @ok="selectOK"></wx-select-company-component>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
  import { STable, Ellipsis } from '@/components'
  import { getUserRoleList, delUserRoleInfo, getCompanyList } from '@/api/api'
  import { deleteAction, postAction } from '@/api/manage'
  import UserRoleModal from '@/views/base/modules/UserRoleModal'
  import UserModal from '@/views/base/modules/UserModal'
  import WxSelectCompanyComponent from '@/components/WxSelectBizComponent/WxSelectCompanyComponent'
  import RoleEdit from '@/views/base/role/RoleEdit'

  export default {
    name: 'RoleList',
    components: {
      RoleEdit,
      WxSelectCompanyComponent,
      STable,
      Ellipsis,
      UserRoleModal,
      UserModal
    },
    data () {
      return {
        url: {
          deleteCompanyRole: '/system/company/deleteCompanyRole',
          addCompanyRole: '/system/company/addCompanyRole'
        },
        mdl: {},
        // 查询参数
        queryParam: {},
        queryParamCompany: {},
        // 表头
        columns: [
          {
            title: '角色名称',
            dataIndex: 'name',
            width: '300px'
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            width: '300px',
            customRender: (text) => this.$momentFormat(text, 'YYYY-MM-DD')
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '200px',
            scopedSlots: { customRender: 'action' }
          }
        ],
        columns2: [
          {
            title: '登录账号',
            dataIndex: 'login',
            width: '350px'
          },
          {
            title: '用户名称',
            dataIndex: 'companyName',
            width: '350px'
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '200px',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          console.log('loadData.parameter', parameter)
          return getUserRoleList(Object.assign(parameter, this.queryParam))
            .then(res => {
              this.$refs.table.clearSelected()
              return res.result
            })
        },
        loadData2: parameter => {
          if (this.selectedRowKeys.length === 0) return
          const params = this.queryParamCompany
          // 查询条件
          params.roleId = this.selectedRowKeys[0]
          return getCompanyList(Object.assign(parameter, params))
            .then((res) => {
              this.$refs.table2.clearSelected()
              return res.result
            })
        },
        selectedRowKeys: [],
        selectedRowKeys2: [],
        selectedRows: [],
        selectionRows2: [],
        options: {
          alert: {
            clear: () => {
              this.selectedRowKeys = []
              this.selectedRowKeys2 = []
            }
          },
          alert2: {
            clear: () => {
              this.selectedRowKeys2 = []
            }
          },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange,
            type: 'radio'
          },
          rowSelection2: {
            selectedRowKeys: this.selectedRowKeys2,
            onChange: this.onSelectChange2
          }
        },
        optionAlertShow: false,
        rightcolval: 0
      }
    },
    computed: {
      rightColMd () {
        return this.selectedRowKeys.length === 0 ? 0 : 12
      },
      leftColMd () {
        return this.selectedRowKeys.length === 0 ? 24 : 12
      }
    },
    created () {
    },
    methods: {
      handleAddUserRole () {
        if (this.selectedRowKeys.length === 0) {
          this.$message.error('请选择一个角色!')
        } else {
          this.$refs.selectUserModal.show()
        }
      },
      // 保存用户
      selectOK (data) {
        const params = {}
        params.roleId = this.selectedRowKeys[0]
        params.companyIds = ''
        const tempCompanyIds = []
        for (var a = 0; a < data.length; a++) {
          tempCompanyIds.push(data[a])
        }
        params.companyIds = tempCompanyIds.join(',')
        console.log(params)
        postAction(this.url.addCompanyRole, params).then((res) => {
          this.$refs.table2.refresh(true)
          this.$message.success(res.content)
        })
      },
      // 角色编辑
      handleRoleEdit (record) {
        this.$refs.modalEdit.edit(record)
      },
      // 用户编辑
      handleCompanyEdit (record) {
        this.$refs.companyFormModal.edit(record)
      },
      // 删除角色
      handleRoleDelete (record) {
        delUserRoleInfo({ id: record }).then((resp) => {
          this.$message.success('删除成功!')
          this.$refs.table.refresh(true)
        })
      },
      // 删除用户
      handleCompanyDelete (record) {
        if (!record) {
          // 如果没有传入，那么批量删除
          record = this.selectedRowKeys2.join(',')
        }
        return deleteAction(this.url.deleteCompanyRole, { companyId: record, roleId: this.selectedRowKeys[0] })
          .then((res) => {
            this.$message.success('删除成功!')
            this.$refs.table2.refresh(true)
            this.$refs.table2.clearSelected()
          })
      },
      // 角色保存
      modalEditOk () {
        this.$refs.table.refresh()
      },
      // 右侧单击
      onSelectChange (selectedRowKeys, selectedRows) {
        this.rightcolval = 1
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
        if (this.$refs.table2) {
          this.$refs.table2.clearSelected()
          this.$refs.table2.refresh()
        }
      },
      // 左侧复选框
      onSelectChange2 (selectedRowKeys, selectedRows) {
        this.selectedRowKeys2 = selectedRowKeys
        this.selectionRows2 = selectedRows
      },
      // 关闭左侧
      hideUserList () {
        this.$refs.table2.clearSelected()
        this.$refs.table.clearSelected()
      },
      // 操作权限
      handlePerssion (roleId) {
        this.$refs.modalUserRole.show(roleId)
      },
      // 保存用户 回调
      companyFormModalOk () {
        this.$refs.table2.refresh()
      },
      // 新增用户
      addCompany: function () {
        if (this.selectedRowKeys.length === 0) {
          this.$message.error('请选择一个角色!')
        } else {
          this.$refs.companyFormModal.roleDisabled = false
          this.$refs.companyFormModal.selectedRole = [this.selectedRowKeys[0]]
          this.$refs.companyFormModal.add()
          this.$refs.companyFormModal.title = '新增'
        }
      },
      // 点击用户 获取用户列表
      handleCompanyList (record) {
        this.rightcolval = 1
        this.selectedRowKeys = [record.id]
        this.$refs.table.updateSelect(this.selectedRowKeys, [record])
        if (this.$refs.table2) {
          this.$refs.table2.clearSelected()
          this.$refs.table2.refresh()
        }
      }
    }
  }
</script>
